<template>
  <view class="goods-detail-page">
    <!-- 商品图片轮播 -->
    <swiper class="goods-swiper" indicator-dots circular autoplay>
      <swiper-item v-for="(image, index) in goods.images" :key="index">
        <image :src="image" class="swiper-image"></image>
      </swiper-item>
    </swiper>

    <!-- 商品信息 -->
    <view class="goods-info">
      <text class="goods-title">{{ goods.title }}</text>
      <view class="price-container">
        <text class="current-price">¥{{ goods.price.toFixed(2) }}</text>
        <text class="original-price" v-if="goods.originalPrice">¥{{ goods.originalPrice.toFixed(2) }}</text>
      </view>
      <view class="sales-volume">销量 {{ goods.sales }} 件</view>
    </view>

    <!-- 商品规格 -->
    <view class="goods-specifications">
      <view class="spec-title">选择规格</view>
      <view class="spec-list">
        <view class="spec-item" v-for="(spec, index) in goods.specifications" :key="index" @click="selectSpec(index)">
          <text :class="selectedSpec === index ? 'selected' : ''">{{ spec }}</text>
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="goods-description">
      <view class="desc-title">商品详情</view>
      <rich-text :nodes="goods.description"></rich-text>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <view class="action-btn" @click="addToCart">
        <uni-icons type="cart" size="28"></uni-icons>
        <text>加入购物车</text>
      </view>
      <view class="action-btn buy-now" @click="buyNow">
        <text>立即购买</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { onLoad } from '@dcloudio/uni-app';

interface Goods {
  id: number;
  title: string;
  price: number;
  originalPrice?: number;
  images: string[];
  sales: number;
  specifications: string[];
  description: string;
}

export default defineComponent({
  setup() {
    let routeParams: any = {};
    onLoad((options) => {
      routeParams = options;
    });
    const goods = ref<Goods>({        
      id: 0,
      title: '',
      price: 0,
      images: [],
      sales: 0,
      specifications: [],
      description: ''
    });
    const selectedSpec = ref(0);

    onLoad((options: any) => {
      // 在实际项目中，这里会通过options.id从API获取商品详情
      // 这里使用模拟数据
      goods.value = {
        id: Number(options.id) || 1,
        title: '新款智能手机 128GB大存储 全面屏拍照手机',
        price: 2999.00,
        originalPrice: 3299.00,
        images: [
          '/static/goods/phone1.jpg',
          '/static/goods/phone2.jpg',
          '/static/goods/phone3.jpg'
        ],
        sales: 1280,
        specifications: ['6GB+128GB 黑色', '6GB+128GB 白色', '8GB+256GB 黑色', '8GB+256GB 白色'],
        description: '<div style="padding: 20rpx;"><p>高性能处理器，流畅运行大型游戏</p><p>4800万像素超清主摄，夜景拍摄更清晰</p><p>4500mAh大电池，续航更持久</p></div>'
      };
    });

    const selectSpec = (index: number) => {
      selectedSpec.value = index;
    };

    const addToCart = () => {
      // 获取本地存储的购物车数据
      const cart = JSON.parse(uni.getStorageSync('cart') || '[]');
      // 检查商品是否已在购物车
      const existingItem = cart.find((item: any) => item.id === goods.value.id && item.spec === goods.value.specifications[selectedSpec.value]);
      
      if (existingItem) {
        // 商品已存在，增加数量
        existingItem.quantity++;
      } else {
        // 添加新商品到购物车
        cart.push({
          id: goods.value.id,
          title: goods.value.title,
          price: goods.value.price,
          image: goods.value.images[0],
          spec: goods.value.specifications[selectedSpec.value],
          quantity: 1
        });
      }

      // 保存购物车数据到本地存储
      uni.setStorageSync('cart', JSON.stringify(cart));
      uni.showToast({ title: '已加入购物车', icon: 'success' });
    };

    const buyNow = () => {
      // 立即购买逻辑
      uni.navigateTo({
        url: `/pages/order-confirm/index?id=${goods.value.id}&spec=${selectedSpec.value}`
      });
    };

    return {
      goods,
      selectedSpec,
      selectSpec,
      addToCart,
      buyNow
    };
  }
});
</script>

<style scoped>
/* 商品图片轮播 */
.goods-swiper {
  height: 500rpx;
  width: 100%;
}

.swiper-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* 商品信息 */
.goods-info {
  padding: 20rpx;
  background-color: #fff;
}

.goods-title {
  font-size: 36rpx;
  color: #333;
  line-height: 50rpx;
  margin-bottom: 15rpx;
  display: block;
}

.price-container {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.current-price {
  font-size: 40rpx;
  color: #ff4400;
  font-weight: bold;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 20rpx;
}

.sales-volume {
  font-size: 26rpx;
  color: #999;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #eee;
}

/* 商品规格 */
.goods-specifications {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 10rpx;
}

.spec-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.spec-list {
  display: flex;
  flex-wrap: wrap;
}

.spec-item {
  padding: 15rpx 30rpx;
  border: 1rpx solid #ddd;
  border-radius: 50rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.spec-item .selected {
  color: #007AFF;
}

.spec-item.selected {
  border-color: #007AFF;
}

/* 商品详情 */
.goods-description {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 10rpx;
}

.desc-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 1rpx solid #eee;
}

.action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #333;
}

.buy-now {
  background-color: #ff4400;
  color: #fff;
}
</style>